<template>
    <div class="com-cnt">
        <div class="box">
            <ul>
                <li>
                    <div class="list">
                        <span class=name>姓名</span>
                        <input class="content user_name" placeholder="请输入收货人姓名" v-model="username"/>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <span class=name>手机号码</span>
                        <input class="content phone" placeholder="请输入收货人联系方式" v-model="userphone"/>
                    </div>
                </li>

                <li>
                    <div class="list">
                        <span class=name>所在区域</span>
                        <div class="selectArea">
                            <select name="province" @change="getCity($event)">
                                <option :value="pro.value" v-for="pro in prolist">{{pro.name}}</option>
                            </select>
                            <select name="city" @change="getArea($event)">
                                <option :value="city.value" v-for="city in citylist">{{city.name}}</option>
                            </select>
                            <select name="area" @change="changeAreaid($event)">
                                <option :value="area.value" v-for="area in arealist">{{area.name}}</option>
                            </select>
                        </div> 
                    </div>
                </li>
                <li>
                    <div class="list">
                        <span class=name>详细地址</span>
                        <input class="content address_jd" placeholder="请输入收货人详细地址" v-model="useraddress"/>
                    </div>
                </li>
            </ul>

            <div class="set">
                <div class="top">
                    <input type="radio" class='ipt' checked='checked'>
                    <span>设为默认收货地址</span>
                </div>
                <button class="btn" @click="getValue">保存</button>
            </div>
        </div>
    </div>
</template>

<script>

import http from "@/assets/js/axios"
import { domain,domain2 } from '@/assets/js/config'
import Qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'

export default {
    name: 'dzglPage',
    data() {
        return {
            sid: [],
            item: [],
            token: '',
            mobile: localStorage.getItem('phone'),
            prolist: [],
            citylist: [],
            arealist: [],
            username:'',
            userphone:'',
            useraddress:'',
            areaId: 0
        }
    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        let that = this;
        that.token = userToken
        that.getProvince()
    },
    methods: {
        //province
        getProvince: function(parentId){
            let that = this
            axios({
                url: domain2 + '/shop/api/common/area' ,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({'parentId':parentId})
            }).then(res => { that.getProvinceSucc(res) }).catch(err => { console.log(err) })
        },
        getProvinceSucc(res){
            this.prolist = res.data
            this.getCity(0,this.prolist[0].value)
        },
        //city
        getCity: function(event,parents){
            let that = this
            let parentId
            if(event === 0){
                parentId = parents
            }else{
                parentId = event.target.value
            }
            axios({
                url: domain2 + '/shop/api/common/area',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({'parentId':parentId})
            }).then(res => { that.getCitySucc(res) }).catch(err => { console.log(err) })
        },
        getCitySucc(res){
            this.citylist = res.data
            this.getArea(0,this.citylist[0].value)
        },
        //area
        getArea: function(event,parents){
            let that = this
            let parentId
            if(event === 0){
                parentId = parents
                that.areaId = parents
            }else{
                parentId = event.target.value
                that.areaId = event.target.value
            }
            axios({
                url: domain2 + '/shop/api/common/area',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({'parentId':parentId})
            }).then(res => { that.getAreaSucc(res) }).catch(err => { console.log(err) })
        },
        getAreaSucc(res){
            this.arealist = res.data
        },
        getValue: function () {
            let that = this;
            let postDo ={
                consignee:that.username,
                areaId: that.areaId,
                address: that.useraddress,
                phone: that.userphone,
                isDefault:true,
                mobile:that.mobile
            }
            if(that.username==''||that.useraddress==''||that.userphone==''){
                maskTips({id:'unall',txt:'请输入完整信息'})
                return false
            }
            axios({
                url: domain2 + '/shop/api/member/receiver/save',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify(postDo)
            }).then(res => { that.getValueSucc(res) }).catch(err => { console.log(err) })

        },
        getValueSucc: function (res) {
            let that = this
            if (res.status == 200) {
                console.log(res)
                maskTips({id:'aaa',txt:res.data.message})
                setTimeout(function(){
                    that.$router.go(-1)
                },1000)
            }
        },
        changeAreaid(event){
            this.areaId = event.target.value
        }

    }

}
</script>

<style lang="stylus" scoped>
.com-cnt
    width: 100%;
    height: 100%;
    .selectArea
        float right
        height 100%
        width 240px
        select 
            width 33%
            float left
            height 100%
html, body {
    font-size: 50px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

/* title */
.header {
    height: 0.92rem;
    text-align: center;
    background: #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.left {
    font-size: 0.28rem;
    position: absolute;
    left: 0.34rem;
    top: 0.36rem;
}

.title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.92rem;
}

.del {
    font-size: 0.24rem;
    color: #999;
    position: absolute;
    right: 0.34rem;
    top: 0.34rem;
}

/* 用户个人信息 */
.box {
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    // margin-top:.92rem;
}

.box ul {
}

.box ul li {
    width: 100%;
    height: 0.96rem;
    border-bottom: 1px solid #e4e4e4;
}

.box ul li .list {
    padding: 0 0.4rem;
    box-sizing: border-box;
    height: 100%;
}

.box ul li .list span {
    font-size: 0.24rem;
    line-height: 0.96rem;
    color: #999;
}

.box ul li .list .icon {
    font-size: 0.34rem;
    color: #cdcdcd;
    float: right;
    display: inline-block;
    line-height: 0.96rem;
    font-weight: 600;
}

.box ul li .list .name {
    width: 1.76rem;
    height: 100%;
    display: inline-block;
    float: left;
}

.box ul li .list .content {
    border: none;
    background: #f9f9f9;
    width: 70%;
    height: 98%;
    display: inline-block;
    float: left;
    color: #999;
}

.content::-webkit-input-placeholder {
    color: #999;
}

.box .set {
    padding: 0 0.4rem;
    box-sizing: border-box;
}

.box .set .top {
    height: 1.04rem;
    font-size: 0.24rem;
    color: #999;
}

.box .set .top input {
    margin-top: 0.32rem;
}

.box .set .btn {
    width: 100%;
    height: 0.8rem;
    background: #8fc122;
    border: none;
    outline: none;
    font-size: 0.24rem;
    color: #fff;
    border-radius: 5px;
    float: left;
}

.box .set .btn1 {
    width: 100%;
    height: 0.8rem;
    background: #8fc122;
    border: none;
    outline: none;
    font-size: 0.24rem;
    color: #fff;
    border-radius: 5px;
    float: left;
    display: none;
}
</style>